웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
VueJS에서 컴포넌트 등의 요소를 숨기거나 보여주는 방법으로 v-if 디렉티브를 사용할 수 있습니다. 아래에서 자세히 알아봅니다.
? VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은?
일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법입니다. 간단하고 빠르게 적용할 수 있기 때문이죠. 그런데 이 둘 중 어떤 것을 사용해야 할까요?
! v-if 그리고 v-show의 차이점은?
이 둘의 공통점은 둘 다 동일한 기능으로 숨기거나 보여준다는 점이지만 기능 구현에 큰 차이점이 있습니다. 가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있습니다. 예를들어 v-if는 DOM 영역에 실제로 그려주지 않는 방법을 사용하고 이와 달리 v-show는 단지 css style의 display: none을 사용하여 보여주지만 않는다는 차이가 있죠. 이런 이유로 보여주거나 숨기는 액션이 반복된야한다면 v-show를 사용하고 그 외의 경우는 v-if를 사용하는 방법이 성능에 더 좋을 것입니다.예를들어 아래와 같이 두 태그에 각각 v-if와 v-show 디렉티브를 적용하고 결과를 알아봅니다.
<div v-if="true">123</div>
<div v-show="true">456</div>
<div v-show="true">456</div>
위 코드를 실제 웹에서 동작시키고 브라우저에서 코드가 어떻게 되는지 확인하면 아래와 같습니다.
<div style="display: none;">456</div>
그 차이점을 아시겠나요? 그럼 v-if의 간단한 예제를 알아봅니다.
# v-if 사용 예제보기
아주 간단한 예제입니다. 클릭 가능한 스위치를 하나 만들고 이 버튼을 누르면 텍스트가 나타나고 사라지는 토글 기능 동작의 예제입니다.<script>
data: {
isStatusOn: false
},
methods: {
toggleOnOff: function() {
this.isStatusOn = !this.isStatusOn;
}
}
...
</script>
data: {
isStatusOn: false
},
methods: {
toggleOnOff: function() {
this.isStatusOn = !this.isStatusOn;
}
}
...
</script>
버튼과 메시지는 아래와 같이 만들어줍니다. v-if도 아래에 위치합니다.
<div v-if="isStatusOn">Hello Webisfree.com</div>
<button @click="toggleOnOff">Click</button>
<button @click="toggleOnOff">Click</button>
이제 버튼을 클릭하면 메시지를 보이고 'Hello Webisfree.com'이 나타나게됩니다.
아래의 글도 찾고 계시지 않나요?